<template>
  <div>
    <!-- 检查是否有子菜单 -->
    <el-sub-menu v-if="route.children && route.children.length"
                 :index="buildFullPath(route.path)">
      <template #title>
        <el-icon>
          <component :is="route.meta.icon" />
        </el-icon>
        <span v-if="!isCollapsed">{{ route.name }}</span>
      </template>
      <!-- 递归渲染子菜单 -->
      <recursive-menu-item v-for="childRoute in route.children"
                           :route="childRoute"
                           :key="childRoute.path"
                           :parent-path="buildFullPath(route.path)"></recursive-menu-item>
    </el-sub-menu>
    <!-- 没有子菜单时渲染普通菜单项 -->
    <el-menu-item v-else
                  :index="buildFullPath(route.path)">
      <el-icon>
        <component :is="route.meta.icon" />
      </el-icon>
      <span v-if="!isCollapsed">{{ route.name }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "RecursiveMenuItem",
  props: {
    route: Object,
    parentPath: {
      type: String,
      default: "",
    },
    isCollapsed: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    buildFullPath (path) {
      // 构建完整路径

      return `${this.parentPath}/${path}`.replace("//", "/");
    },
  },
};
</script>
